import React from 'react';
import { NavBar, Icon } from 'antd-mobile';
import * as utils from '../utils/utils';
import './navigator.css';

class Navigator extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
        };

        this.handleLeftClick = this.handleLeftClick.bind(this);
    }

    componentDidMount () {
        document.body.classList.add(`hasCustomNavigator`);
        if (utils.isIos()) {
            if (utils.isIPhoneX()) {
                document.body.classList.add('hasCustomNavigator-iosX');
            }
            else {
                document.body.classList.add('hasCustomNavigator-ios');
            }
        }
    }

    handleLeftClick () {
        if (!this.props.left) {
            utils.navigate.back();
        }
    }

    render () {
        const center = this.props.center ? this.props.center : this.props.title;
        const left = this.props.left ? this.props.left : <Icon type="left" color="#333" size="md"></Icon>;
        let iosClassName = '';

        if (utils.isIos()) {
            if (utils.isIPhoneX()) {
                iosClassName = 'navigator-iosX';
            }
            else {
                iosClassName = 'navigator-ios';
            }
        }

        return (
            <div className={`navigator ${iosClassName}`}>
                <NavBar
                    mode="light"
                    leftContent={left}
                    rightContent={this.props.right}
                    onLeftClick={this.handleLeftClick}
                >{center}</NavBar>
            </div>
        );
    }
}
export default Navigator;
